<template>
  <div class="person-content">
    <el-tabs type="border-card">
      <el-tab-pane>
        <template #label>
          <span class="tab-label">
            <el-icon>
              <IconPark :icon="User" />
            </el-icon>
            <span>个人资料</span>
          </span>
        </template>
        <personData/>
      </el-tab-pane>
      <el-tab-pane label="账号管理">
        <template #label>
          <span class="tab-label">
            <el-icon>
              <IconPark :icon="IdCardH" />
            </el-icon>
            <span>账号管理</span>
          </span>
        </template>
        <accountManage/>
      </el-tab-pane>
      <el-tab-pane label="教师认证">
        <template #label>
          <span class="tab-label">
            <el-icon>
              <IconPark :icon="Inspection" />
            </el-icon>
            <span>教师认证</span>
          </span>
        </template>
        <teacherVerification/>
      </el-tab-pane>
      <el-tab-pane label="我的发布">
        <template #label>
          <span class="tab-label">
            <el-icon>
              <IconPark :icon="Send" />
            </el-icon>
            <span>我的发布</span>
          </span>
        </template>
        <myPubilsh/>
      </el-tab-pane>
      <el-tab-pane label="我的收藏">
        <template #label>
          <span class="tab-label">
            <el-icon>
              <IconPark :icon="Star" />
            </el-icon>
            <span>我的收藏</span>
          </span>
        </template>
        <myLike/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import IconPark from "@components/IconPark.vue";
import { Send,Inspection,IdCardH,User,Star } from "@icon-park/vue-next";
import accountManage from "./account-manage.vue";
import personData from "./person-data.vue";
import myLike from "./my-like.vue";
import myPubilsh from "./my-pubilsh.vue";
import teacherVerification from "./teacher-verification.vue";

</script>

<style scoped lang="less">
.person-content {
  width: 100%;

  .tab-label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .el-icon {
        margin-top: 2px;
        margin-right: 2px;
    }
  }
}
</style>
